<template>
  <el-form ref="formRef" :model="state.formData" label-width="100px">
    <div class="fieldset">
      <slot name="property-process-name" :model="state.formData" field="name">
        <el-form-item label="流程定义名称">
          <el-input v-model="state.formData.name"></el-input>
        </el-form-item>
      </slot>

      <slot
        name="property-process-display_name"
        :model="state.formData"
        field="display_name"
      >
        <el-form-item label="显示名称">
          <el-input v-model="state.formData.display_name"></el-input>
        </el-form-item>
      </slot>

      <slot
        name="property-process-expire_time"
        :model="state.formData"
        field="expire_time"
      >
        <el-form-item label="期望完成时间">
          <el-input v-model="state.formData.expire_time"></el-input>
        </el-form-item>
      </slot>

      <slot
        name="property-process-instance_url"
        :model="state.formData"
        field="instance_url"
      >
        <el-form-item label="实例启动URL">
          <el-input v-model="state.formData.instance_url"></el-input>
        </el-form-item>
      </slot>

      <slot
        name="property-process-instance_no_class"
        :model="state.formData"
        field="instance_no_class"
      >
        <el-form-item label="编号生成类">
          <el-input v-model="state.formData.instance_no_class"></el-input>
        </el-form-item>
      </slot>
      </div>
  </el-form>
</template>

<script lang="ts">
import { ElForm, ElFormItem, ElInput } from "element-plus";
import { reactive, ref, watch, defineProps, onMounted, defineEmits } from "vue";
import { FlowFormModel } from "../types";

export default {
  name: "ingeniousProcess",
};
</script>
<script lang="ts" setup>
const state = reactive({
  formData: {} as FlowFormModel,
});


const props = defineProps<{
  modelValue: FlowFormModel;
}>();

const emits = defineEmits(["update:modelValue"]);
//@ts-ignore 监听表单数据是否有变化有则更新数据
watch(
  () => state.formData,
  (n, o) => {
    emits("update:modelValue", Object.assign(props.modelValue, state.formData));
  },
  { deep: true }
);

onMounted(() => {
  Object.assign(state.formData, props.modelValue);
});
</script>
<style scoped>
.fieldset{
    border:none;
}
</style>
